<template>
  <dw-page-warpper>
    <dw-menu-datagrid-form
      ref="dwMenuGroupRef"
      :columns="columns"
      v-model:activeFormData="formData"
      :render-form-title="renderFormTitle"
      :data-grid-title="dataGridTitle"
      :edit-form-title-field="nameField"
      :get-page-http-config="getPageHttpConfig"
      :del-info-http-config="delInfoHttpConfig"
      :del-list-http-config="delListHttpConfig"
      :get-info-http-config="getInfoHttpConfig"
      :add-info-http-config="addInfoHttpConfig"
      :update-info-http-config="updateInfoHttpConfig"
    >
      <template #formSlot>
        <table class="dw-form-table">
          <tbody>
            <tr>
              <td class="dw-td-label"><span class="required">厂商名称</span></td>
              <td>
                <el-form-item
                  prop="producerName"
                  :rules="[
                    {
                      required: true,
                      message: '请输入厂商名称',
                      trigger: 'blur',
                    },
                  ]"
                >
                  <el-input v-model="formData.producerName" placeholder="请输入厂商名称..."></el-input>
                </el-form-item>
              </td>
              <td class="dw-td-label">排序号</td>
              <td>
                <el-form-item prop="sortNo" :rules="[]">
                  <el-input-number v-model="formData.sortNo"></el-input-number>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="dw-td-label">厂商介绍</td>
              <td colspan="3">
                <el-form-item prop="producerMemo">
                  <el-input v-model="formData.producerMemo" maxlength="250" placeholder="请输入厂商介绍信息..." show-word-limit type="textarea" />
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </template>
    </dw-menu-datagrid-form>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import type { IColumn, IDelInfoHttpConfig, IDelListHttpConfig, IGetPageHttpConfig, IUpdateInfoHttpConfig, IAddInfoHttpConfig, IGetInfoHttpConfig } from '@/types/menu-datagrid-form';
import type { IProducer } from './producer';

defineOptions({
  name: 'sysProducer',
});
const formData = ref<IProducer>({
  id: '',
  producerName: '',
  producerMemo: '',
});
const dataGridTitle = '厂商列表';
const renderFormTitle = (stateValue: 'add' | 'edit', data: IProducer): string => {
  if (stateValue === 'add') {
    return '厂商信息';
  } else {
    return data.producerName;
  }
};
const nameField = 'producerName';
const columns = ref<IColumn[]>([
  {
    prop: 'producerName',
    label: '厂商名称',
    width: 280,
    align: 'left',
  },
  {
    prop: 'producerMemo',
    label: '厂商介绍',
  },
  {
    prop: 'sortNo',
    label: '排序',
    align: 'right',
    width: 100,
  },
]);
const delInfoHttpConfig: IDelInfoHttpConfig = {
  url: '/admin-api/sys/producer/#{id}',
  delInfoMsgEmphasize: '#{producerName}',
};
const delListHttpConfig: IDelListHttpConfig = {
  url: '/admin-api/sys/producer/list',
};

const getPageHttpConfig: IGetPageHttpConfig<IProducer> = {
  url: '/admin-api/sys/producer/page/list',
};
const getInfoHttpConfig: IGetInfoHttpConfig<IProducer> = {
  url: '/admin-api/sys/producer/#{id}',
};
const addInfoHttpConfig: IAddInfoHttpConfig<IProducer> = {
  url: '/admin-api/sys/producer',
};
const updateInfoHttpConfig: IUpdateInfoHttpConfig<IProducer> = {
  url: '/admin-api/sys/producer',
};
</script>
<style lang="scss" scoped></style>
